<!--
 @Description 音频课程
 @author zhaoxingshun
 @date 2022/11/09
-->

<template>
  <section class="audio-course-list-comp" :style="{ 'margin-top': top}">
    <van-pull-refresh
        id="audio-course-list-comp-box"
        v-model="isLoading"
        :style="{
        height: 'calc(88vh - ' + option.top + 'px - ' + footerHeight() + ')'
      }"
        @refresh="onRefresh"
    >
      <van-list
          v-model="loading"
          :immediate-check="false"
          :error.sync="error"
          :finished="finished"
          :finished-text="finishedText"
          loading-text="正在加载中..."
          error-text="请求失败，点击重新加载"
          @load="onLoad"
      >
        <div id="broadcastList" class="broadcast-List">
          <div v-for="(item, i) in list" :key="i" class="broadcast-item" :class="[imgShape === 's' && 'square']">
            <div class="r-item-left" :style="{'width':imgWidth}">
              <div class="r-img" :style="{'height': height,'width':imgWidth}">
                <van-image :src="setImgPath(item.courseImg, item.courseImgUrl)" :fit="imgType">
                  <template v-slot:loading>
                    <van-loading type="spinner" size="20" />
                  </template>
                  <template v-slot:error>
                    <img src="../../images/base/error-icon.png" alt>
                  </template>
                </van-image>
              </div>
            </div>
            <div class="r-item-right">
              <div class="r-info">
                <div class="info-title clamp3">
                  {{ item.courseName }}
                </div>
                <div class="info-total">
                  <!-- 浏览人次：{{item.pageview || 0}} -->
                </div>
              </div>
              <div class="btn-box" :class="option.footerPosition?'justify-end':'justify-start'">
                <div class="r-btn">{{ btnName || '去听' }}</div>
              </div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </section>
</template>
<script>
import mixins from '../mixins'
import bannerMixins from '../course/mixins'

export default {
  name: 'AudioCourseListComp',
  mixins: [mixins, bannerMixins],
  props: {
    option: {
      type: Object,
      default: {}
    },
    isInitData: {
      type: Boolean,
      default: false
    }
  },
  inject: ['footerHeight'],
  data() {
    return {
      imgShape: 's',
      swiper: null,
      clsList: [],
      defaultList: [
        {
          id: '1',
          carouselImg: '',
          carouselImgUrl: '',
          courseName: '课程一'
        },
        {
          id: '2',
          carouselImg: '',
          carouselImgUrl: '',
          courseName: '课程二'
        }
      ],
      courseClassify: '',
      page: 1,
      view: '/API-DOCUMENT/document/file/download?id=',
      total: 0,
      isNoData: false,
      isLoadError: false,
      error: false,
      loading: false, // 是否处于加载状态
      finished: false, // 是否已加载完所有数据
      isLoading: false, // 是否处于下拉刷新状态
      finishedText: '已经到底了',
      list: [],
    }
  },
  async created() {
    if (this.isInitData) {
      await this.initData()
      //   this.clsList = result.clsList.data.data
    } else {
      this.finished=true
      this.list = this.defaultList
    }
  },
  methods: {
    refresh4other() {
      return new Promise((resolve, reject) => {
        this.finished = true
        this.page = 1
        this.list = []
        resolve()
      })
    },
    /**
     * 用于initData方法调用完设置数据
     */
    setData(result) {
      this.finished = false
      const { dataList } = result
      const res = dataList
      const { rows, total } = res.data || {}
      this.list.push(...rows)
      this.loading = false
      this.isLoading = false
      this.isNoData = total < 1
      if (this.isNoData) {
        this.finishedText = ''
      } else {
        this.finishedText = '已经到底了'
      }
      if (this.list.length >= total) {
        this.finished = true
      } else {
        this.finished = false
      }
    },
    onRefresh() {
      this.finished = false
      this.page = 1
      this.list = []
      this.getDataByCode('dataList')
    },

    onLoad() {
      if (!this.isLoading) {
        this.page += 1
        this.getDataByCode('dataList')
      } else {
        this.loading = false
      }
    }

  }
}
</script>
<style lang="scss">
@import '@/styles/utility/rem.scss';

.audio-course-list-comp {

  width: 100%;
  position: relative;

  .broadcast-List {
    width: 100%;
    /*   position: absolute;
       top: rem(12);
       left: 0;
       right: 0;
       bottom: 0;
       background: #f7f8f9;
       padding: 0 rem(30);
       padding-bottom: rem(30);*/

    .broadcast-item {
      width: 100%;
      margin-top: rem(20);
      display: flex;
      background-color: #fff;
      padding: rem(20);
      border-radius: rem(16);

      &.square {
        .r-item-left {
          width: rem(190);
        }

        .r-item-right {
          flex: 1;
          //width: rem(432);
        }
      }

      .r-item-left {
        //flex: 1;
        //width: 0;
        display: flex;
        margin-right: rem(20);

        .r-img {
          position: relative;
          height: rem(190);
          border-radius: rem(16);

          .van-image {
            width: 100%;
            height: 100%;

            img {
              width: 100%;
              height: 100%;
              border-radius: rem(16);
            }

            .van-image__error {
              > img {
                width: rem(60);
                height: rem(60);
              }

            }
          }
        }
      }

      .r-item-right {
        //width: rem(332);
        width: 0;
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;

        .r-info {
          .info-title {
            font-size: rem(30);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: left;
            color: #333333;
          }

          .info-total {
            position: absolute;
            left: rem(20);
            right: rem(20);
            bottom: rem(15);
            font-size: rem(26);
            font-family: PingFang SC Regular, PingFang SC Regular-Regular;
            font-weight: 400;
            text-align: left;
            color: #666666;
          }
        }

        .btn-box {
          display: flex;

          .r-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            min-width: rem(132);
            padding: rem(10) rem(30);
            height: rem(54);
            @include bg-color($mainColor);
            border-radius: rem(27);
            font-size: rem(24);
            font-family: PingFang SC Medium, PingFang SC Medium-Medium;
            font-weight: bold;
            text-align: center;
            color: #ffffff;
          }
        }

        .justify-start {
          justify-content: start;
        }

        .justify-end {
          justify-content: end;
        }
      }
    }
  }
}
</style>

